<template>
	<div>
		<div class="nav_box">
			<div class="nav_inner">
				<img src="../assets/smallIcon/logo_GL.png" alt="">
				<Search />
				<router-link to="/layout/fenlei-city"><p>分类</p></router-link>
			</div>
		</div>
		<div class="like">
			<div class="like_info">
				<div class="green"></div>
			    <h5>猜你喜欢</h5>
                <router-link to="/layout/more-city">
                	更多>>
                </router-link>
                <hr>
			</div>
			
            <div class="nature_down">
				<div class="inner">
					<swiper :options="swiperoption">
					    <swiper-slide>
							<img  :src="swiperShow[0]" alt="" >
							<img  :src="swiperShow[1]" alt="" >
					    </swiper-slide>
					    <swiper-slide>
					    	<img  :src="swiperShow[2]" alt="" >
					    	<img  :src="swiperShow[0]" alt="" >
					    </swiper-slide>			 
					</swiper>
				</div>
			</div>
		</div>

		<div class="hot">
			<div class="hot_box">
				<div class="green"></div>
			    <h5>热门攻略</h5>
                <router-link to="/layout/more-hot">更多>></router-link>
                 <hr>
			</div>
            <div class="strateg">           	
            	<img src="../assets/personIcon/lushangzhengwen_01.png" height="80" width="80" alt="">
            	<button>+关注</button>
            	<h3>粥粥贤</h3>
				<p class="nav_f">3分钟前 来自 路上 lushang.com</p>
				<p>诚然，独乐乐不如众乐乐。桃花源深处，大可呼朋友引伴，或邀知己二三，或与爱人携手同行，亦或一人暴走一城，从此与旅游行箱结盟。从一座城到另一座城，从你的城到他的城，又或者从城市人乡野，从乡野入倾城，行走在路上，谁说...</p>
				<router-link to="/layout/maintext">
					<img class="picture"src="../assets/landscape/zhengwen_01.png" height="280" width="710" alt="">
				</router-link>			
            </div>
            <div class="back">
            	<div class="strateg final">
            	<img src="../assets/personIcon/wozanguode_03.png" height="80" width="80" alt="">
            	<button>+关注</button>
            	<h3>舞月蝶</h3>
				<p class="nav_f">5分钟前 来自 路上 lushang.com</p>
				<p>盲目的旅行常常会带来无聊和疲惫，世上没有不美丽的风景，只有不美丽的心情。生活中，有许许多多的旅行者，怀揣着各种各样的目的去旅行，也有相当多的一部分人，选择老老实实地窝在家里，不出门，亦不问去留。</p>
				<img class="picture"src="../assets/landscape/wozanguodeshipin_11.png" height="280" width="710" alt="">
			
            </div>
            </div>
		</div>

		<FooterNav />
	</div>
</template>

<script>

import Search from "../components/search"
import FooterNav from "../components/footerNav"

export default{
	name:"gonglue",
	data(){
		return{
			swiperOption: {
		        pagination: {
					el: '.swiper-pagination',
			    },
			    loop:true
		   	},
            swiperShow:[
				require("../assets/landscape/picture_GL01.png"),
				require("../assets/landscape/picture_GL02.png"),
				require("../assets/landscape/shouye04.png"),
				require("../assets/landscape/shouye05.png"),
				require("../assets/landscape/shouye06.png"),
				require("../assets/landscape/shouye007.png"),
				require("../assets/landscape/shouye08.png"),
				require("../assets/landscape/shouye09.png"),
				require("../assets/landscape/shouye10.png"),
				],
				swiperoption: {
					freeMode : true
		   		}
		}
	},
	components:{
		Search,
		FooterNav
	}
}	

</script>
<style scoped lang="less">

	.nav_box{
		width: 100%;
		height: 94 /50rem;
		background-color: #7dd19d;
		overflow: hidden;
		position:fixed;
	    top:0;
	    left: 0;
	    right: 0;
	    z-index: 666;
		.nav_inner{
			width:710 /50rem;
			height: 100%;
			margin-left: 24 /50rem;	
			img{
				margin-top: 14 /50rem;
				width: 72 /50rem;
				height: 72 /50rem;
				margin-right: 34 /50rem;
				float: left;
			}
			p{
				float: right;
				line-height: 94 /50rem;
				margin-right: 18 /50rem;
			}
		}
	}
	.like{
		// width: 710 / 50rem;
		height: 350 / 50rem;
		background-color: #fff;
		margin-top: 100 / 50rem;
		margin-bottom: 2 /50rem;
		// margin: 20/50rem 20/50rem 20/50rem 20/50rem;
		.green{
			float: left;
			width: 16 / 50rem;
			height: 38 / 50rem;
			background-color: #7dd19d;
			margin-left: 20 / 50rem;
			margin-top: 10 / 50rem;
		}
		h5{
			display: inline-block;
			font-size: 30 / 50rem;
			margin-left: 10 / 50rem;
			margin-top: 16 / 50rem;
		}
		a{
			float: right;
			margin-right: 26 / 50rem;
			margin-top: 18 / 50rem;
		}
		hr{
          border: 1px solid #e6e6e6;
          border-top: none;
		}
		.nature_down{
			width: 710 / 50rem;
			height: 280 / 50rem;
			margin: 20/50rem 20/50rem 20/50rem 20/50rem;
			.inner{
				width: 100%;
			    height: 252 /50rem;
			    background-color: #fff;
			    margin:  0 auto;
			    margin-bottom: 20 /50rem;
			}
			img{
				width: 350 /50rem;
				height: 230 /50rem;
				margin-top: 10 /50rem;
			}
		}
	}
	.hot{
		height: 624 / 50rem;
		background-color: #fff;
		margin-top: 20 / 50rem;
		.hot_box{
			height: 58 / 50rem;
			.green{
			    float: left;
			    width: 16 / 50rem;
			    height: 38 / 50rem;
			    background-color: #7dd19d;
			    margin-left: 20 / 50rem;
			    margin-top: 10 / 50rem;
		    }
			h5{
			display: inline-block;
			font-size: 30 / 50rem;
			margin-left: 10 / 50rem;
			margin-top: 16 / 50rem;
			
		}
		a{

			float: right;
			margin-right: 26 / 50rem;
			margin-top: 18 / 50rem;
		}
		hr{
          border: 1px solid #e6e6e6;
          border-top: none;
		}
	}
		
		.strateg{
			width: 710 / 50rem;
			height: 565 / 50rem;
			margin-left: 20 /50rem;
			margin-right: 20 / 50rem;
			
			img{
		        display: inline-block;
		        width: 80 / 50rem;
		        height: 80 / 50rem;
		        margin-top: 20 / 50rem;
	        }
	        h3{
                margin-left: 100 / 50rem;
                margin-top: -75 / 50rem;
		        font-size: 24 / 50rem;
	        }
	        .nav_f{
		       margin-left: 100 / 50rem;
		       margin-top: 10 / 50rem;
		       font-size: 18 /50rem;
	        }
            p{
    	       font-size: 26 / 50rem;
    	       margin-top: 20 / 50rem;
    	       line-height: 35 / 50rem;
            }
            button{
               width: 100 / 50rem;
               height: 43 / 50rem;
               background: #fff;
               color: #7dd19d;
               float: right;
               font-size: 20 /50rem;
               border: 1px solid #7dd19d;
               margin-right: 21 / 50rem;
               margin-top: 21 / 50rem;
               border-radius: 8 / 50rem;
            }
            .picture{
            	width: 710 / 50rem;
            	height: 280 / 50rem;
            	margin-top: 14 / 50rem;

            }
            hr{
               border: 1px solid #e6e6e6;
               border-top: none;
               margin-top: 5 / 50rem;
		    }
		}
	}
	.back{
		height: 565 / 50rem;
		background-color: #fff;
	}
	.final{
		margin-bottom: 94 /50rem;
	}
</style>